<template>
  表单控件，基于el-form二次开发，可以通过拖拽标签（比如“分类”），实现调整顺序、移除等操作<br>
  支持插槽<br>
  <hr>
  <el-row>
    <el-col :span="2">设置列数：</el-col>
    <el-col :span="12">
      <el-slider
        v-model="formMeta.formColCount"
        :min="1"
        :max="8"
      ></el-slider>
    </el-col>
  </el-row>
  
  <nf-form
    v-form-drag="formMeta"
    :model="model"
    v-bind="formMeta"
  >
    <template v-slot:text>
      <h1>外部插槽</h1>
    </template>
  </nf-form>
  <div
    v-for="(item, key, index) in model"
    :key="index"
  >
    {{key}}： {{item}}
  </div>
</template>


<script>
  import { reactive, nextTick } from 'vue'
  import { ElCol, ElRow, ElLoading, ElSlider } from 'element-plus'
  import _formMeta from './form.json'
  import { createModel, lifecycle } from '/nf-ui-core'

</script>

<script setup>
  lifecycle('表单页面', true)

  const props = defineProps({
    moduleId: [Number, String],
    dataId: [Number, String],
    formMetaId: [Number, String],
    actionId: [Number, String],
    type: [Number, String],
    dialogInfo: [Object]
  })
  
  // 获取表单控件需要的meta
  const formMeta = reactive(_formMeta)
  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1

  // 根据 meta 创建表单的 model
  const model = createModel(formMeta.itemMeta, formMeta.colOrder)

  const loadingInstance1 = ElLoading.service({ fullscreen: true })
  nextTick(() => {
    loadingInstance1.close()
  })
  
</script>
